<template>
	<div class="sysLog">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>系统日志</span>
				<el-button style="float: right; padding: 3px 0" type="text" @click="seach_onoff = !seach_onoff">搜索按钮</el-button>
			</div>
			<div class="searchWarp" :class="seach_onoff?'animated':''">
				<el-form ref="form" label-width="100px" style="display: flex;flex-wrap: wrap;">
					<el-form-item label="日期" :span="6" class="lz-el-col">
						 <el-date-picker
							v-model="seach.value"
							size="mini"
						    type="datetimerange"
						    range-separator="至"
						    start-placeholder="开始日期"
						    end-placeholder="结束日期"
							:default-time="['00:00:00', '23:59:59']">
						</el-date-picker>
					</el-form-item>
					<el-form-item :span="6" class="lz-el-col">
						<el-button type="primary" size="mini" icon="el-icon-search" plain @click="seachInput">搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="list">
				<div class="list-item" v-for="(item,index) in list" :key="index" @click="dowlodaFile(item)">
					<div class="item-text">{{item}}</div>
					<div class="item-icon">
						<i class="el-icon-arrow-right"></i>
					</div>
				</div>
			</div>
			
			
		</el-card>

	</div>
</template>

<script>
	let that = ''
	//非父子组件传值
	import bus from '../../../../static/js/bus.js';
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['userInfo', 'api']) //获取
		},
		components: {},
		data() {
			return {
				seach_onoff:false,
				seach:{
					value:[new Date(new Date().getTime() - 3600 * 1000 * 24 * 1),new Date()]
				},
				list:[]
			}
		},
		mounted() {
			that = this
			//获取系统日志列表
			that.sysDatalist()
			
			
		},
		methods: {
			seachInput(){
				//获取系统日志列表
				that.sysDatalist()
			},
			//获取系统日志列表
			sysDatalist(){
				// 开始时间start 结束时间end
				let start=that.GLOBAL.formatDate()
				let end=that.GLOBAL.formatDate(that.seach.value[1])
				let req={
					start:new Date(that.seach.value[0]).getTime(),
					end:new Date(that.seach.value[1]).getTime()
				}
				that.GLOBAL.doGet(that.api.GLOBAL_log_logFiles, req).then(res => {
					if (res.code == 0&&res.data) {
						that.list=res.data
					}else{
						that.list=[]
					}
				})
			},
			async dowlodaFile(item){
				let data=await that.GLOBAL.startApp()
				window.open(`${data}${that.api.GLOBAL_log_getLogFile}?fileName=${item}&Authorization=${that.userInfo.token}`)
			}
			
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.sysLog {
		.list{
			width: 100%;height: 70vh;overflow: auto;
		}
		.list-item{
			display: flex;width: 100%;justify-content: space-between;padding: 15px;border-bottom: 1px solid #f0f0f0;box-sizing: border-box;
		}
		.list-item:active{
			background-color: #f0f0f0;
		}
		.animated {
			height: 60px;
		}
		
		.box-card {
			padding-bottom: 20px;
		
		}
		
		.lz-el-pagination {
			margin-top: 20px;
			float: right;
		}
	}
</style>
